<!-- 护理项目列表页 -->
<template>
  <!-- 表格数据 -->
  <div class="newBox">
    <button class="bt wt-120" @click="OnHandleBulid()">
      新增护理项目
    </button>
  </div>
  <t-table :data="data" :columns="columns" :hover="hover">
    <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
    <template #image="{ row }">
      <div class="tdesign-demo-image-viewer__base">
        <t-image-viewer :images="[row.image]">
          <template #trigger="{ open }">
            <div class="tdesign-demo-image-viewer__ui-image">
              <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
              <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                <span>
                  <BrowseIcon size="1.4em" /> 预览
                </span>
              </div>
            </div>
          </template>
        </t-image-viewer>
      </div>
    </template>

    <template #op="{ row }">
      <div class="operateCon">
        <a class="btn-dl" :class="row.count ? 'disabled' : ''" @click="del(row)">删除</a>
        <a class="font-bt" :class="row.count ? 'disabled' : ''" @click="onHandleEdit(row)">编辑</a>
        <a class="delete" :class="row.count && row.status === 1 ? 'disabled' : row.status === 1 ? 'btn-d1' :'font-bt'" @click="disable(row)">{{ row.status == 1 ? '禁用' : '启用' }}</a>
      </div>
    </template>
  </t-table>
  <t-pagination v-if="total > 10" :total="total" :default-current="1" :default-page-size="10"
    show-first-and-last-page-btn @change="SubOnChange" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { columns } from '../columns'

let emits = defineEmits(['onChange', 'handleBulid', 'handleEdit', 'OpenDelete', 'OpenDisable'])

let props = defineProps({
  data: {
    type: Object,
    default: () => { return {} }
  },
  hover: Boolean,
  pages: {
    type: Object,
    default: () => { return {} }
  },
  total: Number
})

let SubOnChange = (pageInfo) => {
  emits('onChange', pageInfo)
}

let OnHandleBulid = () => {
  emits('handleBulid')
}

let onHandleEdit = (row) => {
  if(!row.count){
    emits('handleEdit', row)
  }
  
}

let del = (row) => {
  if(!row.count){
    emits('OpenDelete', row)
  }
 
}

let disable = (row) => {
  if(!row.count){
    emits('OpenDisable', row)
  }
 
}
</script>